<template>
  <page-header :configPageHeader="configPageHeader" @pageBack="pageBack"></page-header>
  <div class="page-wrapper address-wrapper">
    <van-config-provider :theme-vars="themeVars" class="address-content">
      <div class="address-list">
        <van-cell-group
          inset
          v-if="allAddressList.addressList && allAddressList.addressList.length > 0"
        >
          <van-cell v-for="item in allAddressList.addressList" @click="goHome(item.addressDetail)">
            <template #title>
              <van-radio :name="item.addressId" checked-color="#3CB677" v-model="chosenAddressId">
                <div class="address-item">
                  <h3>
                    <span>{{ item.name }} {{ item.tel }}</span>
                    <van-button type="primary" round size="mini" v-if="item.isDefault"
                      >默认</van-button
                    >
                  </h3>
                  <p>{{ item.province + item.city + item.county + item.addressDetail }}</p>
                </div>
              </van-radio>
            </template>
            <template #right-icon>
              <div @click="goPage('addressEdit', item.addressId)">
                <svg-icon
                  icon-class="edit-fill"
                  color="#999999"
                  style="width: 20px; height: 20px"
                ></svg-icon>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
        <h4>以下地址超出配送范围</h4>
        <van-cell-group
          inset
          v-if="allAddressList.disabledList && allAddressList.disabledList.length > 0"
        >
          <van-cell v-for="item in allAddressList.disabledList">
            <template #title>
              <div class="address-content">
                <h3>{{ item.name }} {{ item.tel }}</h3>
                <p>{{ item.province + item.city + item.county + item.addressDetail }}</p>
              </div>
            </template>
            <template #right-icon>
              <svg-icon icon-class="address" color="#333333"></svg-icon>
            </template>
          </van-cell>
        </van-cell-group>
      </div>

      <div class="btn-content">
        <van-button type="primary" size="large" @click="goPage('addressEdit')">新增地址</van-button>
      </div>
    </van-config-provider>
  </div>
</template>
<script lang="ts">
import PageHeader from '@comp/pageHeader/index.vue'
import { ref, defineComponent, computed, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { IGlobalState } from '@/store'
import * as Types from '@/store/action-types'

export default defineComponent({
  components: {
    PageHeader,
  },
  setup() {
    const router = useRouter()
    const store = useStore<IGlobalState>()
    //头部返回
    const configPageHeader = {
      title: '收货地址列表',
      leftText: '返回',
    }
    // 返回
    const pageBack = () => {
      router.go(-1)
    }
    //跳转页面
    const goPage = (pageName: string, data?: any) => {
      router.push({
        path: '/' + pageName,
        query: { addressId: data },
      })
    }
    // 样式变量
    const themeVars = {
      radioCheckedIconColor: '#3CB677',
      buttonPrimaryBorderColor: '#3CB677',
      buttonPrimaryBackgroundColor: '#3CB677',
    }

    //获取地址
    const allAddressList = computed(() => store.state.address.allAddressList)
	
    let chosenAddressId = ref('1')
		const goHome = (val:string) =>{
			router.push({path: '/home'})
			store.commit(`home/${Types.GET_ADDRESS}`,val)
		}
    onBeforeMount(async () => {
      if (allAddressList.value.addressList.length == 0) {
        store.dispatch(`address/${Types.GET_ADDRESSLIST}`)
      }
    })
    return {
      configPageHeader,
      themeVars,
      pageBack,
      goPage,
			goHome,
      allAddressList,
      chosenAddressId,
    }
  },
})
</script>
<style scoped lang="scss">
@import '@/styles/viriables.scss';
@import '@/styles/mixins.scss';
.page-wrapper {
  margin-top: 46px;
}
.address-wrapper {
  width: 100%;
  background-color: $bg-color;
  height: 100%;
  min-height: 93vh;

  .address-content {
    padding-top: 15px;
    .address-list {
      margin-bottom: 40px;
    }
    h4 {
      color: $secondary-font-color;
      padding: 15px;
      margin: 0px;
      font-weight: normal;
      font-size: 14px;
    }
    h3 {
      margin: 0px;
      font-weight: normal;
      font-size: 16px;
    }
    .van-cell {
      align-items: center;
    }
    .address-item {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      justify-content: flex-start;
      text-align: left;
      h3 {
        display: flex;
        align-items: center;
        span {
          margin-right: 15px;
        }
      }
      p {
        font-size: 13px;
        margin: 8px 0 0;
      }
    }
  }
  .btn-content {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
  }
}
.svg-bigIcon {
  width: 24px;
  height: 24px;
}
</style>
